import * as echarts from 'echarts';
const myEcharts = echarts.init(document.querySelector('.heap-line .chart'));

const option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    top: '0%',
    textStyle: {
      color: 'rgba(255,255,255,.5)',
      fontSize: '12'
    }
  },
  grid: {
    left: '10',
    right: '10',
    bottom: '10',
    top: '30',
    containLabel: true
  },
  xAxis: [
    {
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.6)'
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
      type: 'category',
      boundaryGap: false,
      data: ['4.1', '4.2', '4.3', '4.4', '4.5', '4.6', '4.7']
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.6)',
          fontSize: 12
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      }
    }
  ],
  series: [
    {
      name: '总新增确诊',
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#0184d5',
        width: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(1, 132, 213, 0.4)' // 渐变色的起始颜色
            },
            {
              offset: 0.8,
              color: 'rgba(1, 132, 213, 0.1)' // 渐变线的结束颜色
            }
          ],
          false
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)'
      },
      symbol: 'circle',
      symbolSize: '8',
      itemStyle: {
        color: '#0184d5',
        borderColor: 'rgba(221, 220, 107, .1)',
        borderWidth: 12
      },
      showSymbol: false,
      data: [28, 48, 29, 41, 41, 21, 33]
    },
    {
      name: '新增境外输入确诊',
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#00d887',
        width: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(0, 216, 135, 0.4)'
            },
            {
              offset: 0.8,
              color: 'rgba(0, 216, 135, 0.1)'
            }
          ],
          false
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)'
      },
      // 设置拐点 小圆点
      symbol: 'circle',
      // 拐点大小
      symbolSize: 5,
      // 设置拐点颜色以及边框
      itemStyle: {
        color: '#00d887',
        borderColor: 'rgba(221, 220, 107, .1)',
        borderWidth: 12
      },
      // 开始不显示拐点， 鼠标经过显示
      showSymbol: false,
      data: [5, 19, 11, 17, 9, 10, 13]
    }
  ]
};

myEcharts.setOption(option);
window.addEventListener('resize', function () {
  myEcharts.resize();
});
